<!DOCTYPE html>
<html lang="en">
<head>
    <title>js调用摄像头拍照上传图片</title>
    <meta charset="utf-8">
    <style type="text/css">
        #webcam {
            border: 1px solid #666666;
            width: 320px;
            height: 240px;
        }

        input.button11_big {
            font-family: "宋体";
            font-size: 16px;
            font-color: red;
            background-image: url(<n:base/>/images/button_bg.gif);
            background-repeat: no-repeat;
            background-position: center center;
            height: 30px;
            width: 72px;
            padding-top: 3px;
            padding-left: 5px;
            cursor: hand;
            background-color: #FFFFFF;
            border-top-style: none;
            border-right-style: none;
            border-bottom-style: none;
            border-left-style: none;
        }
    </style>
</head>
<body>
<!--<button onclick="openMedia()">开启摄像头</button>-->
<video id="video" width="320px" height="240px" autoplay="autoplay"></video>
<canvas id="canvas" width="320px" height="240px"></canvas>
<button onclick="takePhoto()">拍照</button>
<img id="imgTag" src="" alt="imgTag" style="display: none">
<button onclick="closeMedia()">关闭摄像头</button>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script>
    var mediaStreamTrack = null; // 视频对象(全局)
    var video;
    $(function () {
        alert('该页面会调用您的摄像头')
        openMedia()
    })

    function openMedia() {
        const constraints = {
            video: {width: 320, height: 240},
            audio: false
        };
        //获得video摄像头
        video = document.getElementById('video');
        var promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(function (mediaStream) {
            // mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
            mediaStreamTrack = mediaStream.getVideoTracks()
            video.srcObject = mediaStream;
            video.play();
        });
    }

    // 拍照
    function takePhoto() {
        //获得Canvas对象
        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, 320, 240);
        // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
        var img = document.getElementById('canvas').toDataURL();
        document.getElementById('imgTag').src = img;//上传 　
        console.log('img-----', img);
        // 这里的img就是得到的图片
        if (img) {
            $.ajax({
                url: "<n:base/>/catDServlet?ttt=0",
                type: "POST",
                data: {type: "pixel", image: img},
                dataType: "html",
                success: function (data) {
                    console.log(data);
                    document.gauges.forEach(function (gauge) {
                        gauge.value = data.data
                    });
                    setTimeout(closeMedia(), 5);
                }, error: function () {
                    console.log("服务端异常！");
                }
            });
        } else {
            $.ajax({
                url: "<n:base/>/catDServlet?ttt=1",
                type: "POST",
                data: {type: "pixel", image: img},
                dataType: "html",
                success: function (data) {
                    console.log(data);
                    document.gauges.forEach(function (gauge) {
                        gauge.value = data.data
                    });
                    setTimeout(closeMedia(), 5);
                }, error: function () {
                    console.log("服务端异常！");
                }
            });
        }


    }

    // 关闭摄像头
    function closeMedia() {
        var stream = document.getElementById('video').srcObject;
        var tracks = stream.getTracks();

        tracks.forEach(function (track) {
            track.stop();
        });

        document.getElementById('video').srcObject = null;
    }
</script>
</body>